<template>
  <div></div>
</template>
<script setup>
import { ref, watch } from "vue";
import { createVNode, render } from "vue";
import FloatScreen from "./FloatScreen.vue";
const props = defineProps({
  floatDataList: {
    type: Array,
    required: true
  }
});

const isPlaying = ref(false);

watch(
  () => props.floatDataList,
  (newVal, oldVal) => {
    console.log("props.floatDataList", newVal, oldVal);
    next();
  },
  { deep: true }
);

function next() {
  if (!isPlaying.value && props.floatDataList.length > 0) {
    createFloatScreen(props.floatDataList[0]);
    isPlaying.value = true;
  }
}
function getContainer() {
  const container = document.getElementById("svga-container");
  if (container) {
    return container;
  }
  const divContainer = document.createElement("div");
  divContainer.id = "svga-container";
  // 添加到body上
  document.body.appendChild(divContainer);
  return divContainer;
}

const renderContent = vNode => {
  const container = getContainer();
  const div = document.createElement("div");
  // 添加到body上
  container.appendChild(div);
  render(vNode, div);
};

function createFloatScreen(floatData) {
  const vNode = createVNode(FloatScreen, {
    floatData,
    onComplete: () => {
      isPlaying.value = false;
      emit("delete");
      // next();
    }
  });
  renderContent(vNode);
}
const emit = defineEmits(["delete"]);
</script>

<style scoped lang="scss"></style>
